<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入vue的js文件-->
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <h3>用户列表</h3>
    <table border="1">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
        <tr v-for="(u,index) in list">
            <td>{{u.id}}</td>
            <td>{{u.name}}</td>
            <td>{{u.age}}</td>
            <td>
                <button @click="deleteRow(index)">删除</button>
            </td>
        </tr>

    </table>

    <hr>

    <h3>添加用户</h3>

    <input type="text" placeholder="请输入编号" v-model="user.id">
    <input type="text" placeholder="请输入姓名" v-model="user.name">
    <input type="text" placeholder="请输入年龄" v-model="user.age">
    <button @click="add()">添加</button>

</div>

<script>
    let v = new Vue({
        el:"#app",
        data:{
            list:[
                {id:1,name:'张三',age:18},
                {id:2,name:'李四',age:19},
                {id:3,name:'王五',age:20}
            ],
            user:{
                id:'',
                name:'',
                age:''
            }
        },
        methods:{
            add(){
                // 引用复制（浅复制）
                // v.list.push(v.user);

                // JSON.parse(JSON.stringify(v.user) 创建一个新的对象添加到数组中
                // 此时user对象的值发生改变和数组中的新对象是无关的
                // 深复制
                v.list.push(JSON.parse(JSON.stringify(v.user)));
            },
            deleteRow(index){
                console.log("正在删除，下标:"+index)
                v.list.splice(index,1);
            }
        }

    })
</script>

</body>
</html>